<template>
  <div class="container">
    <van-nav-bar
      title="版本管理"
      left-arrow
      @click-right="$route.params.appType?$router.push('/addVersion'):show=true"
      @click-left="()=>{$router.back()}"
    >
      <van-icon name="add" slot="right" />
    </van-nav-bar>
    <div class="list">
      <BaseList ref="list"  :option="listOption" @load="loadData" >
        <div slot-scope="props" slot="item">
          <div v-if="$route.params.appType" class="item">
            <div>
              <span class="app-type">{{props.data.AppType}}</span>
              <span class="build-type">{{props.data.BuildType}}</span>
            </div>
            <p class="versionName">版本:{{props.data.VersionName}}</p>
            <p class="versionCode">{{props.data.VersionCode}}</p>
            <div class="option-box">
              <span v-if="!props.data.IsPublished" @click="publishVersion(props.data)" class="option">发布</span>
            </div>
          </div>
          <div class="item" v-if="!$route.params.appType">
            <span class="app-type">{{props.data}}</span>
            <div class="option-box">
              <span v-if="!props.data.IsPublished" @click="$router.push('/version/'+props.data)" class="option">版本管理</span>
              <span v-if="!props.data.IsPublished" @click="$router.push('/updates/'+props.data)" class="option">升级管理</span>
            </div>
          </div>
        </div>
      </BaseList>
    </div>
    <van-dialog v-if="!$route.params.appType" v-model="show" @confirm="addAppType">
      <van-field
        v-model="appType"
        label="应用类型"
        placeholder="应用类型"
      />
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from 'vant'
import BaseList from '@/components/common/Baselist'
export default {
  components: { BaseList },
  data() {
    return {
      appType: '',
      show: false,
      pageIndex: 0,
      pageSize: 20,
      data: [],
      listOption: {
        needRefresh: false,
        needLoadMore: false
      }
    }
  },
  watch: {
    $route(to, from) {
      this.$refs.list.onDataChange([], true)
      this.pageIndex = 0
      this.listOption.needRefresh = true
      this.listOption.needLoadMore = true
      this.loadData(0)
    }
  },
  mounted() {},
  methods: {
    selectApkVersions(type) {
      const data = {
        params: {
          appType: this.$route.params.appType
        }
      }
      this.$axios.get('/api/versions', data).then(res => {
        let data = []
        if (res.data.result == 'success') {
          data = data.concat(res.data.data)
        } else {
          Toast(res.data.msg)
        }
        if (type == 0) {
          this.pageIndex = 0
          this.data = []
        } else {
          this.pageIndex++
        }
        this.data = this.data.concat(data)
        this.$refs.list.onDataChange(this.data, true)
      })
    },
    SelectedAppTypes(type) {
      this.$axios.get('/api/appTypes').then(res => {
        let data = []
        if (res.data.result == 'success') {
          data = data.concat(res.data.data)
        } else {
          console.log(res.data.msg)
        }
        if (type == 0) {
          this.pageIndex = 0
          this.data = []
        } else {
          this.pageIndex++
        }
        this.data = this.data.concat(data)
        this.$refs.list.onDataChange(this.data, true)
      })
    },
    publishVersion(version) {
      const data = {
        versionCode: version.VersionCode,
        versionName: version.VersionName,
        appType: version.AppType,
        buildType: version.BuildType,
        downloadUrl: version.DownloadUrl,
        objectId: version.objectId
      }
      this.$axios.post('/api/publishVersion', data).then(res => {
        if (res.data.result == 'success') {
          Toast('发布成功')
          this.loadData(0)
        } else {
          Toast(res.data.msg || '发布成功')
        }
      })
    },
    addAppType() {
      if (!this.appType) {
        return
      }
      const data = {
        name: this.appType
      }
      this.$axios.post('/api/addAppType', data).then(res => {
        if (res.data.result !== 'success') {
          Toast(res.data.msg)
        }
        this.appType = ''
        this.loadData(0)
      })
    },
    loadData(type) {
      if (this.$route.params.appType) {
        this.selectApkVersions(type)
      } else {
        this.SelectedAppTypes(type)
      }

    }
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.list {
  flex: 1;
  overflow: scroll;
}
.item {
  height: 100px;
  margin: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: beige;
  position: relative;
  padding: 8px;
}
.app-type {
  background-color: yellow;
  color: blueviolet;
  font-size: 14px;
  padding: 3px;
  margin-right: 5px;
}
.build-type {
  background-color: green;
  color: white;
  font-size: 12px;
  padding: 3px;
  margin-right: 5px;
}
.option-box {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.option {
  font-size: 14px;
  background-color: #0093ff;
  border-radius: 6px;
  border-width: 1px;
  border-color: #0093ff;
  color: white;
  padding: 5px;
}
.versionName {
  margin-top: 12px;
  font-size: 14px;
  color: #222222;
}
.versionCode {
  font-size: 14px;
  margin-top: 12px;
  color: #777777;
}
</style>
